<template>
  <div class="edit">
    <el-dialog :visible.sync="dialogVisible" center class="countDialog" width="80%" :close-on-click-modal="false" @close="resetO()">
      <div slot="title" class="dialog-title">{{ pageTitle }}</div>
      <div style="margin: 10px;">
        <el-card shadow="hover">
          <div style="font-size: 16px; font-weight: bold; margin-bottom: 20px;">
            图片素材
          </div>
            <div>
              <el-tabs v-model="activeName" style="min-height: 400px; height: auto;">
                <el-tab-pane label="视频" name="video" style="height: 100%; width: 100%; overflow-y: auto;">
                  <div>
                    <div style="margin-top: 10px; margin-bottom: 10px;">
                      <el-upload :disabled="video_uploading" accept="video/mp4" action="#" :show-file-list="false" :before-upload="beforeUploadVido" :on-success="handleSuccess" :on-error="handleError" :http-request="customUploadVideo" multiple>
                        <el-button size="mini" type="primary">上传视频</el-button>
                        <div class="el-upload__tip" slot="tip">只能上传video/mp4文件，且不超过50MB</div>
                      </el-upload>
                    </div>
                    <div style="display: flex; flex-wrap: wrap; gap: 10px;">
                      <div style="border-radius: 8px; border: 1px solid #8c939d; width: 150px; height: 252px;" v-for="item in video_arr">
                        <div style="position: relative;">
                          <el-image style="width: 149px; height: 100px;" :src="(!item.cimg || item.cimg === '') ? video_covimg : item.cimg " @click="handlePictureCardPreview_video(item)"></el-image>
                          <span style="position: absolute; top: 0px; right: 0px; width: 20px; height: 20px; background: red; color: white; border-radius: 50%; text-align: center; line-height: 20px; cursor: pointer;" class="delete-icon" @click="handleRemove(item)">×</span>
                        </div>
                        <div>
                          <div style="margin-left: 5px; margin-right: 5px; margin-top: 3px;">
                            宽:<el-input-number :controls="false" :style="{width: '70%'}" min="0" precision="0" step="1" max="100000" size="mini" v-model="item.width"></el-input-number>
                          </div>
                          <div style="margin-left: 5px; margin-right: 5px; margin-top: 3px;">
                            高:<el-input-number :controls="false" :style="{width: '70%'}" min="0" precision="0" step="1" max="100000" size="mini" v-model="item.height"></el-input-number>
                          </div>
                          <div style="margin-left: 5px; margin-right: 5px; margin-top: 3px;">
                            时长:<el-input-number :controls="false" :style="{width: '70%'}" min="0" precision="0" step="1" max="200" size="mini" v-model="item.duration"></el-input-number>
                          </div>
                          <div style="margin-left: 5px; margin-right: 5px; margin-top: 3px;">
                            大小(KB):<el-input-number :controls="false" :style="{width: '70%'}" min="0" precision="0" step="1" max="200000000" size="mini" v-model="item.size"></el-input-number>
                          </div>
                      </div>
                      </div>
                    </div>
                    <el-dialog :visible.sync="video_innerVisible" append-to-body>
                      <div style="width: 640px; height: 360px;">
                        <video style="background-color: transparent !important;" width="100%" height="100%" controls>
                          <source type="video/mp4" :src="video_dialogImageUrl"></source>
                        </video>
                      </div>
                    </el-dialog>
                  </div>
                </el-tab-pane>
                <el-tab-pane label="图片" name="image" style="height: 100%; width: 100%; overflow-y: auto;">
                  <div>
                    <div style="margin-top: 10px; margin-bottom: 10px;">
                      <el-upload :disabled="video_uploading" accept="image/webp,image/jpeg,image/jpg,image/png" action="#" :show-file-list="false" :before-upload="beforeUploadVido" :on-success="handleSuccess" :on-error="handleError" :http-request="customUploadImg" multiple>
                        <el-button size="mini" type="primary">上传图片</el-button>
                        <div class="el-upload__tip" slot="tip">只能上传image/jpg,image/jpeg,image/png文件，且不超过20MB</div>
                      </el-upload>
                    </div>
                    <div style="display: flex; flex-wrap: wrap; gap: 10px;">
                      <div style="border-radius: 8px; border: 1px solid #8c939d; width: 150px; height: 262px;" v-for="item in img_arr">
                        <div style="position: relative;">
                          <el-image style="width: 149px; height: 100px;" :src="item.ad_urls" @click="handlePictureCardPreview_img(item)"></el-image>
                          <span style="position: absolute; top: 0px; right: 0px; width: 20px; height: 20px; background: red; color: white; border-radius: 50%; text-align: center; line-height: 20px; cursor: pointer;" class="delete-icon" @click="handleRemove_img(item)">×</span>
                        </div>
                        <div>
                          <div style="margin-left: 5px; margin-right: 5px; margin-top: 3px;">
                            宽:<el-input-number :controls="false" :style="{width: '70%'}" min="0" precision="0" step="1" max="100000" size="mini" v-model="item.width"></el-input-number>
                          </div>
                          <div style="margin-left: 5px; margin-right: 5px; margin-top: 3px;">
                            高:<el-input-number :controls="false" :style="{width: '70%'}" min="0" precision="0" step="1" max="100000" size="mini" v-model="item.height"></el-input-number>
                          </div>
                          <div style="margin-left: 5px; margin-right: 5px; margin-top: 3px;">
                            大小(KB):<el-input-number :controls="false" :style="{width: '70%'}" min="0" precision="0" step="1" max="200000000" size="mini" v-model="item.size"></el-input-number>
                          </div>
                          <div style="margin-left: 5px; margin-right: 5px; margin-top: 3px;">
                            描述:<el-input size="mini" v-model="item.desc"></el-input>
                          </div>
                        </div>
                      </div>
                    </div>
                    <el-dialog :visible.sync="img_innerVisible" append-to-body>
                      <el-image width="100%" height="100%" :src="img_dialogImageUrl" controls></el-image>
                    </el-dialog>
                  </div>
                </el-tab-pane>
              </el-tabs>
          </div>
        </el-card>
        <el-card style="margin-top: 20px;" shadow="hover">
          <div style="font-size: 16px; font-weight: bold; margin-bottom: 20px;">
            文案素材
          </div>
          <div style="font-size: 14px; font-weight: bold; margin-top: 20px; margin-bottom: 10px;">
            <el-button size="mini" type="primary" @click="addtitle">新增文案</el-button>
          </div>
          <div>
            <el-input style="margin-top: 10px;" size="mini" v-for="(item,index) in title_arr" v-model="title_arr[index]" placeholder="请输入5～55个字的标题">
              <el-button slot="append" icon="el-icon-delete" @click="deltitle(index)"></el-button>
            </el-input>
          </div>
        </el-card>
        <el-card style="margin-top: 20px;" shadow="hover">
          <div style="font-size: 16px; font-weight: bold; margin-bottom: 20px;">落地页</div>
          <div style="font-size: 14px; font-weight: bold; margin-top: 20px; margin-bottom: 10px;">h5落地页</div>
          <div>
            <el-input size="mini" v-model="form.link" placeholder="请输入h5落地页"></el-input>
          </div>
          <div style="font-size: 14px; font-weight: bold; margin-top: 20px; margin-bottom: 10px;">推广APP</div>
          <div>
            <el-select size="mini"  v-model="form.app_id" placeholder="请选择APP">
              <el-option v-for="item in app_arr" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </div>
          <div style="font-size: 14px; font-weight: bold; margin-top: 20px; margin-bottom: 10px;">安卓唤起链接</div>
          <div>
            <el-input size="mini" v-model="form.dplink" placeholder="请输入安卓唤起链接"></el-input>
          </div>
          <div style="font-size: 14px; font-weight: bold; margin-top: 20px; margin-bottom: 10px;">IOS唤起链接</div>
          <div>
            <el-input size="mini" v-model="form.unlink" placeholder="请输入IOS唤起链接"></el-input>
          </div>
        </el-card>
        <el-card style="margin-top: 20px;" shadow="hover">
          <div style="font-size: 16px; font-weight: bold; margin-bottom: 20px;">
            广告预算与出价
          </div>
          <div style="font-size: 14px; font-weight: bold; margin-top: 20px; margin-bottom: 10px;">每日广告预算</div>
          <div>
            <el-input-number size="mini" v-model="form.budget" min="0" precision="2" step="0.01" max="200000" placeholder="每日广告预算:元"></el-input-number>
          </div>
          <div style="font-size: 14px; font-weight: bold; margin-top: 20px; margin-bottom: 10px;">广告出价</div>
          <div>
            <el-input-number size="mini" v-model="form.price" min="0" precision="2" step="0.01" max="200" placeholder="广告出价:元"></el-input-number>
          </div>
        </el-card>
        <el-card style="margin-top: 20px;" shadow="hover">
          <div style="font-size: 16px; font-weight: bold; margin-bottom: 20px;">
            创意设置
          </div>
          <div>
            <div style="font-size: 14px; font-weight: bold; margin-bottom: 10px;">选择计划</div>
            <div>
              <el-select size="mini" :disabled="isadd && !!(form.plan_id && form.plan_id !== '') " v-model="form.plan_id" placeholder="请选择所属计划">
                <el-option v-for="item in plan_arr" :key="item.id" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </div>
            <div style="font-size: 14px; font-weight: bold; margin-top: 20px; margin-bottom: 10px;">创意名称</div>
            <div>
              <el-input size="mini" v-model="form.name" placeholder="创意名称"></el-input>
            </div>
          </div>
        </el-card>
        <el-card style="margin-top: 20px;" shadow="hover">
          <div style="width: 100%; text-align: center">
            <el-button size="mini" type="primary" icon="el-icon-edit" @click="onSubmit()" plain>提交</el-button>
            <el-button size="mini" type="info" icon="el-icon-message" @click="resetO()" plain>取消</el-button>
          </div>
        </el-card>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {dsp_adv_creative_add, dsp_adv_creative_edit} from '@/api/dsp_adv_creative'
import {dsp_adv_plan_all} from '@/api/dsp_adv_plan'
import {dsp_adv_app_all} from '@/api/dsp_adv_app'
import axios from 'axios'
import { getToken } from '@/utils/auth'
export default {
  name: 'dsp_adv_creative-edit',
  data(){
    return {
      isadd:false,
      video_uploading:false,
      video_covimg:require('@/assets/images/video-list.jpeg'),
      video_dialogImageUrl:'',
      video_innerVisible: false,
      video_disabled:false,
      img_dialogImageUrl:'',
      img_innerVisible: false,
      img_disabled:false,
      dialogVisible: false,
      pageTitle:'新增',
      activeName:'video',
      form:{
        plan_id:'',
        name:'',
        title:[],
        link:'',
        dplink:'',
        unlink:'',
        budget:199999,
        price:0,
      },
      plan_arr:[],
      app_arr:[],
      video_arr:[],
      img_arr:[],
      title_arr:[],
    }
  },
  computed: {
  },
  components: {

  },
  mounted(){
  },
  created() {
    this.get_plan_arr()
  },
  methods: {
    addtitle(){
      this.title_arr.push('')
    },
    deltitle(index){
      this.$delete(this.title_arr, index)
    },
    //上传视频
    beforeUploadVido(options){
      this.video_uploading = true
      return !!getToken()
    },
    handleSuccess() {
      this.video_uploading = false
      this.$message.success('上传成功')
    },
    handleError() {
      this.video_uploading = false
      this.$message.error('上传失败')
    },
    customUploadVideo(options){
      const formData = new FormData()
      formData.append('file', options.file)
      return axios.post('/v1/dsp_adv_creative/upload_video', formData, {
        baseURL: process.env.VUE_APP_BASE_API,
        withCredentials: true, // send cookies when cross-domain requests
        timeout: 20000, // request timeout
        headers: {
          'token': getToken(),
          'Content-Type': 'multipart/form-data'
        }
      }).then(res => {
        console.log(res.data.data)
        if (res.data.data){
          this.video_arr.push(res.data.data)
        }
      }).catch(err => {
        options.onError(err)
      })
    },
    customUploadImg(options){
      const formData = new FormData()
      formData.append('file', options.file)
      return axios.post('/v1/dsp_adv_creative/upload_img', formData, {
        baseURL: process.env.VUE_APP_BASE_API,
        withCredentials: true, // send cookies when cross-domain requests
        timeout: 20000, // request timeout
        headers: {
          'token': getToken(),
          'Content-Type': 'multipart/form-data'
        }
      }).then(res => {
        console.log(res.data.data)
        if (res.data.data){
          this.img_arr.push(res.data.data)
        }
      }).catch(err => {
        options.onError(err)
      })
    },
    handleRemove(file) {
      var tmp = []
      for (var i = 0; i < this.video_arr.length; i++) {
        if (this.video_arr[i].ad_urls === file.ad_urls) {
          continue
        }
        tmp.push(this.video_arr[i])
      }
      this.video_arr = tmp
    },
    handleRemove_img(file) {
      var tmp = []
      for (var i = 0; i < this.video_arr.length; i++) {
        if (this.video_arr[i].ad_urls === file.ad_urls) {
          continue
        }
        tmp.push(this.video_arr[i])
      }
      this.video_arr = tmp
    },
    handlePictureCardPreview_video(file) {
      console.log(file)
      this.video_dialogImageUrl = file.ad_urls;
      this.video_innerVisible = true;
    },
    handlePictureCardPreview_img(file) {
      this.img_dialogImageUrl = file.ad_urls;
      this.img_innerVisible = true;
    },
    get_plan_arr(){
      //计划
      dsp_adv_plan_all().then(res => {
        var data = res.data
        this.plan_arr = data
      }).catch(err => {
        console.log(err)
      })
      dsp_adv_app_all().then(res => {
        var data = res.data
        this.app_arr = data
      }).catch(err => {
        console.log(err)
      })
    },
    resetO(){
      this.dialogVisible = false
      this.form = {
        plan_id:'',
        name:'',
        title:[],
        link:'',
        dplink:'',
        unlink:'',
        budget:199999,
        price:0,
      }
      this.video_arr = []
      this.img_arr = []
      this.title_arr = []
      //调用父组件方法
      this.$parent.GetList()
    },
    onSubmit(){
      var sdata = this.form
      sdata.flag = parseInt(sdata.flag)
      if(this.img_arr.length === 0 && this.video_arr.length === 0){
        this.$message({
          showClose: true,
          center:true,
          message: '无广告素材',
          type: 'error'
        })
        return false
      }
      if(this.title_arr.length === 0){
        this.$message({
          showClose: true,
          center:true,
          message: '无广告文案',
          type: 'error'
        })
        return false
      }
      if(this.budget === 0){
        this.$message({
          showClose: true,
          center:true,
          message: '无广告预算',
          type: 'error'
        })
        return false
      }
      if(this.price === 0){
        this.$message({
          showClose: true,
          center:true,
          message: '无广告出价',
          type: 'error'
        })
        return false
      }
      if(this.link === ''){
        this.$message({
          showClose: true,
          center:true,
          message: '无广告落地页',
          type: 'error'
        })
        return false
      }
      var tmpvadm = []
      if (this.video_arr.length > 0) {
        for (var i = 0; i < this.video_arr.length; i++) {
          var tmpv = this.video_arr[i]
          tmpv.width = parseInt(tmpv.width)
          tmpv.height = parseInt(tmpv.height)
          tmpvadm.push(tmpv)
        }
      }

      var tmpiadm = []
      if ((this.img_arr.length) > 0) {
        for (var i = 0; i < this.img_arr.length; i++) {
          var tmpi = this.img_arr[i]
          tmpi.width = parseInt(tmpi.width)
          tmpi.height = parseInt(tmpi.height)
          tmpiadm.push(tmpi)
        }
      }

      sdata.video_adm = tmpvadm
      sdata.img_adm = tmpiadm
      sdata.title = this.title_arr
      console.log(sdata)
      this.SObj(sdata).then(res => {
        var data = res.data
        console.log(data)
        this.$message({
          showClose: true,
          center:true,
          message: '操作成功',
          type: 'success'
        })
        this.dialogVisible = false
        this.$parent.GetList()
      }).catch(err => {
        console.log(err)
      })

    },
    SObj(sdata){
      if (sdata.id == undefined || sdata.id == ''){
        return dsp_adv_creative_add(sdata)
      }else {
        return dsp_adv_creative_edit(sdata)
      }
    },
    showInfo(tinfo){
      var info = tinfo
      this.dialogVisible = true
      if (info.id != undefined) {
        this.pageTitle = '编辑'
        this.isadd = true
        this.activeName = ""
        if (info.video_adm && info.video_adm.length>0){
          this.video_arr = info.video_adm
          this.activeName = "video"
        }
        if (info.img_adm && info.img_adm.length>0){
          this.img_arr = info.img_adm
          this.activeName = "image"
        }
        if (info.title && info.title.length>0){
          this.title_arr = info.title
        }
        if (!info.budget) {
          info.budget = 199999
        }
        this.form = info
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.edit {

}
</style>